<template>
  <div class="price-cards" :style="{'flex-wrap': warp}">
    <div class="span4 price-card year" v-if="data.weixinLinkImg">
      <div class="image">
        <a href="javascript:void(0);"><br>
          <img :src="data.weixinLinkImg" ><br>
        </a>
      </div>
      <div class="header">主讲老师</div>
      <div class="description">{{data.weixinLinkName}}</div>
      <div class="description">
        <p>用微信扫描二维码，<br>
          加主讲老师微信解答问题。</p>
      </div>
    </div>
    <div class="span4 price-card year" v-if="data.qqLinkImg">
      <div class="image">
        <a href="javascript:void(0);"><br>
          <img :src="data.qqLinkImg" ><br>
        </a>
      </div>
      <div class="header">主讲老师</div>
      <div class="description">{{data.qqLinkName}}</div>
      <div class="description">
        <p>用微信扫描二维码，<br>
          加主讲老师微信解答问题。</p>
      </div>
    </div>
    <div class="span4 price-card year" v-if="data.opengz==1 && data.weixingzimg && data.weixingzcode">
      <div class="image">
        <a href="javascript:void(0)"><br>
          <img :src="data.weixingzimg" ><br>
        </a>
      </div>
      <div class="header">微信公众号</div>
      <div class="description">{{data.weixingzcode}}</div>
      <div class="description">
        <p>用微信扫描二维码，<br>
          订阅公众号，获取课程最新消息。</p>
      </div>
    </div>
    <div class="span4 price-card year" v-if="data.clientLinkImg">
      <div class="image">
        <a href="javascript:void(0);"><br>
          <img :src="data.clientLinkImg" ><br>
        </a>
      </div>
      <div class="header">微信客服</div>
      <div class="description">{{data.clientLinkName}}</div>
      <div class="description">
        <p>用微信扫描二维码，<br>
          加我好友。</p>
      </div>
    </div>
  </div>
</template>
<script setup>
defineProps({
  data:{
    type:Object,
    default:{}
  },
  warp:{
    type:String,
    default:"nowrap"
  }
})
</script>
<style scoped>
.price-cards {
  display: flex;
  align-content: center;
  align-items: stretch;
  justify-content: space-between;
}
.price-card{
  text-align: center;
  padding: 16px;
  background: #fff;
  border-radius: 2px;
  width: 32.7%;
  box-sizing: border-box;
  margin-bottom: 24px;
  position: relative;
  display: flex;
  border:1px solid #eee;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.price-card img{max-width: 300px;width:100%;height: 360px;object-fit: scale-down}

@media (max-width: 767px) {
  .price-cards {
    flex-wrap: wrap;
  }

  .price-card.year-2 {
    order: -1;
  }
  .price-card {
    width: 100%;
  }
}
.price-card:hover{
  box-shadow: 0 34px 47px 0 rgba(0,0,0,0.06);
}
.price-card .sub-header {
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: rgba(155,154,155,0.77);
  letter-spacing: 1px;
}

.price-card .price {
  font-family: DINCondensed-Bold, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-weight: bold;
  font-size: 48px;
  color: #4A4A4A;
  width: 100%;
  line-height: 1;
  margin-top: 16px;
  letter-spacing: 1px;
}
.price-card .price > .original.hide {
  display: block;
  color: #fff;
}

.price-card .price > .original {
  font-size: 16px;
  text-decoration: line-through;
  font-weight: 300;
  color: #878787;
  letter-spacing: 3px;
}

.price-card .price .special {
  color: #158bc6;
}

.price-card .price > .original > span {
  font-size: 18px;
}

.price-card .price span {
  font-size: 18px;
  line-height: 2
}
.price-card .header {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #4A4A4A;
  letter-spacing: 5px;
  margin-top: 40px
}
.price-card .description {
  margin-top: 24px;
  font-size: 14px;
  color: #9B9B9B;
}
.price-card .action {
  margin-top: 32px;
}
.price-card .btn-large {
  width: 100%;
  display: block;
  box-sizing: border-box;
  font-size: 100%;
}
.price-card .btn-primary.btn-reverse {
  background: none;
  border: 1px solid #158BC6;
  color: #158BC6
}
.price-card .btn-primary.btn-reverse:hover{
  border: 1px solid #2db9ff;
  color: #2db9ff;
}

</style>